Išskirtinai CSS akordeonai: vieno atidarymo valdiklių kūrimas geresnei vartotojo patirčiai

Akordeonai yra pagrindinis šiuolaikinio interneto dizaino elementas, suteikiantis švarų ir efektyvų būdą pateikti didelius informacijos kiekius lengvai įsisavinamu formatu. Jie ypač naudingi DUK, produktų aprašymams ir navigacijos meniu. Šiame straipsnyje gilinamasi į išskirtinai CSS akordeonų kūrimą su vieno atidarymo elgsena, o tai reiškia, kad vienu metu gali būti atidaryta tik viena akordeono sekcija. Šis metodas pagerina vartotojo patirtį, nes apsaugo nuo turinio perkrovos ir skatina sutelktą naršymą.

Išskirtinai CSS akordeonų privalumų supratimas

Tradiciniams JavaScript pagrįstiems akordeonams dažnai reikia valdyti būseną ir apdoroti įvykius, o tai gali padidinti jūsų kodo sudėtingumą. Kita vertus, išskirtinai CSS akordeonai išnaudoja CSS selektorių ir :checked pseudo-klasės galią, kad pasiektų norimą funkcionalumą nepasikliaudami JavaScript. To rezultatas:

• Geresnis našumas: JavaScript pašalinimas sumažina puslapio įkėlimo laiką ir pagerina bendrą našumą.
• Pagerintas prieinamumas: Išskirtinai CSS akordeonus galima lengvai padaryti prieinamus, naudojant tinkamą HTML semantiką ir ARIA atributus.
• Supaprastinta priežiūra: Mažiau kodo reiškia lengvesnę priežiūrą ir derinimą.
• Geresnis SEO: Švarus HTML ir CSS gali pagerinti paieškos sistemų optimizavimą.

Statybiniai blokai: HTML struktūra

Mūsų išskirtinai CSS akordeono pagrindas yra gerai struktūrizuota HTML žymėjimo kalba. Naudosime šiuos elementus:

• <input type="radio">: Radijo mygtukai naudojami siekiant užtikrinti, kad vienu metu būtų atidaryta tik viena sekcija. Atributas name yra labai svarbus radijo mygtukams grupuoti.
• <label>: Etiketės (labels) yra susietos su radijo mygtukais ir veikia kaip akordeono antraštės.
• <div>: Konteineris, kuriame laikomas akordeono turinys.

Štai pagrindinė HTML struktūra:

<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">1 sekcijos pavadinimas</label>
  <div class="accordion-content">
    <p>1 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">2 sekcijos pavadinimas</label>
  <div class="accordion-content">
    <p>2 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">3 sekcijos pavadinimas</label>
  <div class="accordion-content">
    <p>3 sekcijos turinys.</p>
  </div>
</div>

Paaiškinimas:

• Klasė accordion-container naudojama bendrai akordeono struktūrai stilizuoti.
• Kiekviena akordeono sekcija susideda iš input (radijo mygtuko), label ir div su turiniu.
• Radijo mygtukų atributas name nustatytas į "accordion", kad juos sugrupuotų ir užtikrintų, jog vienu metu galima pasirinkti tik vieną.
• label atributas for atitinka atitinkamo input elemento id, susiejant etiketę su radijo mygtuku.

Akordeono stilizavimas su CSS

Dabar pridėkime CSS, kad stilizuotume akordeoną ir įgyvendintume vieno atidarymo elgseną.

.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Iš pradžių paslėpti turinį */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Rodyti turinį, kai radijo mygtukas pažymėtas */
}

Paaiškinimas:

• .accordion-container: Stilizuoja konteinerį su rėmeliu ir parašte.
• input[type="radio"]: Paslepia radijo mygtukus, nes norime rodyti tik etiketes.
• label: Stilizuoja etiketes, kad jos atrodytų kaip akordeono antraštės.
• .accordion-content: Iš pradžių paslepia turinį naudojant display: none.
• input[type="radio"]:checked + label: Stilizuoja etiketę, kai atitinkamas radijo mygtukas yra pažymėtas.
• input[type="radio"]:checked + label + .accordion-content: Tai yra raktas į vieno atidarymo elgseną. Jis naudoja gretimo brolinio elemento selektorių (+), kad pasirinktų accordion-content, kuris eina iškart po pažymėto radijo mygtuko label, ir nustato jo display į block, padarydamas jį matomu.

Prieinamumo gerinimas su ARIA atributais

Siekiant užtikrinti, kad mūsų akordeonas būtų prieinamas vartotojams su negalia, turime pridėti ARIA atributus. ARIA (Accessible Rich Internet Applications) atributai suteikia semantinę informaciją pagalbinėms technologijoms, tokioms kaip ekrano skaitytuvai.

Štai kaip galime pagerinti prieinamumą:

<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">1 sekcijos pavadinimas</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>1 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">2 sekcijos pavadinimas</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>2 sekcijos turinys.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">3 sekcijos pavadinimas</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>3 sekcijos turinys.</p>
  </div>
</div>

Paaiškinimas:

• role="presentation" ant konteinerio paslepia konteinerio semantinę prasmę, leisdamas įdėtoms ARIA rolėms tinkamai perteikti struktūrą.
• aria-controls: Nurodo elementą, kurį valdo dabartinis elementas (šiuo atveju – turinio sekcija).
• aria-expanded: Nurodo, ar valdomas elementas šiuo metu yra išskleistas, ar suskleistas. Nors mes dinamiškai nekeičiame šios reikšmės su JavaScript, gera praktika yra ją įtraukti, o sudėtingesniame pavyzdyje JavaScript galėtų būti naudojamas jos reikšmei perjungti. Pradinė reikšmė nustatyta į `false`.
• role="region": Identifikuoja turinio sekciją kaip atskirą puslapio regioną.
• aria-labelledby: Identifikuoja etiketę, kuri apibūdina turinio sekciją.

Svarbūs aspektai prieinamumui:

• Navigacija klaviatūra: Užtikrinkite, kad vartotojai galėtų naršyti per akordeono sekcijas naudodami klaviatūrą (pvz., Tab klavišą).
• Suderinamumas su ekrano skaitytuvais: Išbandykite akordeoną su ekrano skaitytuvu, kad įsitikintumėte, jog turinys yra tinkamai perskaitomas.
• Spalvų kontrastas: Užtikrinkite pakankamą spalvų kontrastą tarp teksto ir fono vartotojams su regėjimo sutrikimais.

Pritaikymas ir patobulinimai

Pagrindinis išskirtinai CSS akordeonas gali būti toliau pritaikomas ir tobulinamas, kad atitiktų specifinius dizaino reikalavimus.

Perėjimų (Transitions) pridėjimas

Norėdami sukurti sklandesnę vartotojo patirtį, galime pridėti CSS perėjimus akordeono turiniui.

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Pridėti perėjimą */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Nustatyti maksimalų aukštį perėjimui */
}

Paaiškinimas:

• Prie .accordion-content pridėjome savybę transition, kad animuotume savybę max-height.
• Nustatėme pradinį max-height į 0, kad paslėptume turinį.
• Kai radijo mygtukas yra pažymėtas, nustatome max-height į pakankamai didelę reikšmę (pvz., 500px), kad turinys galėtų sklandžiai išsiskleisti. Savybė overflow: hidden neleidžia turiniui išsilieti perėjimo metu, jei faktinis turinio aukštis yra mažesnis nei 500px.

Stilizavimas su piktogramomis

Piktogramų pridėjimas prie akordeono antraščių gali pagerinti vizualinį patrauklumą ir vartotojo supratimą. Tam galite naudoti CSS pseudo-elementus arba šriftų piktogramas.

Naudojant CSS pseudo-elementus:

label::after {
  content: '+'; /* Pradinė piktograma */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Pakeisti piktogramą išskleidus */
}

Naudojant šriftų piktogramas (pvz., Font Awesome):

1. Į savo HTML įtraukite Font Awesome CSS: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
2. Savo etiketėse naudokite atitinkamas Font Awesome klases:

<label for="section1">1 sekcijos pavadinimas <i class="fas fa-plus"></i></label>

Tada, naudokite CSS, kad pakeistumėte piktogramą, kai sekcija yra išskleista:

input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* įterpti minuso piktogramą */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* fa-minus unicode */
    float:right;
}

Adaptyvaus dizaino aspektai

Užtikrinkite, kad jūsų akordeonas gerai veiktų skirtingų dydžių ekranuose, naudodami adaptyvaus dizaino technikas. Galite naudoti medijos užklausas (media queries), kad pritaikytumėte akordeono stilių pagal ekrano plotį.

Pavyzdys:

@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Pritaikyti plotį mažesniems ekranams */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Pritaikyti šrifto dydį */
  }
}

Pažangios technikos

Nors pagrindinis išskirtinai CSS akordeonas suteikia tvirtą pagrindą, yra pažangių technikų, kurios gali dar labiau pagerinti jo funkcionalumą ir vartotojo patirtį.

Būsenos išsaugojimas su „Local Storage“

Galite naudoti JavaScript (nors tai paneigia gryno CSS požiūrį) ir „local storage“, kad prisimintumėte akordeono būseną, todėl kai vartotojas grįš į puslapį, anksčiau atidarytos sekcijos vis dar bus atidarytos.

Dinaminis turinio įkėlimas

Akordeonams su dideliu kiekiu turinio, galite įkelti turinį dinamiškai naudojant AJAX. Tai gali pagerinti pradinį puslapio įkėlimo laiką ir sumažinti pralaidumo naudojimą.

Dažniausių problemų sprendimas

Štai keletas dažniausiai pasitaikančių problemų, su kuriomis galite susidurti diegdami išskirtinai CSS akordeonus, ir kaip jas išspręsti:

• Akordeonas neveikia:
  • Įsitikinkite, kad radijo mygtukų atributas name yra vienodas visoms sekcijoms.
  • Patikrinkite, ar label atributas for atitinka atitinkamo input elemento id.
  • Patikrinkite savo CSS selektorius, ar nėra rašybos klaidų.
• Turinys iš pradžių nėra paslėptas:
  • Įsitikinkite, kad .accordion-content klasei taikomas stilius display: none.
• Perėjimai neveikia:
  • Patikrinkite, ar savybė transition taikoma teisingam elementui (.accordion-content).
  • Įsitikinkite, kad max-height iš pradžių nustatytas į 0, o pažymėjus radijo mygtuką - į pakankamai didelę reikšmę.
• Prieinamumo problemos:
  • Naudokite ekrano skaitytuvą, kad išbandytumėte akordeoną ir nustatytumėte bet kokias prieinamumo problemas.
  • Įsitikinkite, kad ARIA atributai yra tinkamai įdiegti.

Pavyzdžiai iš realaus pasaulio

Išskirtinai CSS akordeonai gali būti naudojami įvairiuose realaus pasaulio scenarijuose:

• DUK puslapiai: Dažniausiai užduodamų klausimų pateikimas glaustai ir organizuotai.

  Pavyzdys: Universiteto svetainė, kurioje naudojamas akordeonas, rodantis DUK apie priėmimą tarptautiniams studentams, apimantis tokias temas kaip vizų reikalavimai, mokesčiai už mokslą skirtingomis valiutomis ir apgyvendinimo galimybės.

• Produktų aprašymai: Produktų detalių, specifikacijų ir atsiliepimų rodymas.

  Pavyzdys: El. prekybos svetainė, kurioje naudojamas akordeonas, rodantis skirtingus produkto aspektus, tokius kaip techninės specifikacijos (įtampa, matmenys), medžiagų sudėtis ir kilmės šalis pasaulinei auditorijai.

• Navigacijos meniu: Išskleidžiamų meniu kūrimas svetainėms su sudėtingomis navigacijos struktūromis.

  Pavyzdys: Vyriausybės svetainė su sudėtinga organizacine struktūra, kurioje akordeonai naudojami departamentams ir paslaugoms suskirstyti piliečiams iš įvairių sluoksnių, užtikrinant, kad turinys būtų lengvai prieinamas nepriklausomai nuo kalbos ar vyriausybės išmanymo.

• Formos: Ilgų formų suskirstymas į valdomas sekcijas.

  Pavyzdys: Internetinė paraiškos forma pasaulinei stipendijų programai, kurioje akordeonai naudojami atskirti sekcijas, tokias kaip asmeniniai duomenys, akademinė istorija ir finansinė informacija, gerinant vartotojo patirtį pareiškėjams iš įvairių šalių su skirtingomis švietimo sistemomis.

Išvados

Išskirtinai CSS akordeonai su vieno atidarymo funkcionalumu siūlo galingą ir efektyvų būdą pagerinti vartotojo patirtį ir prieinamumą jūsų svetainėje. Išnaudodami CSS selektorių ir ARIA atributų galią, galite sukurti interaktyvius elementus, kurie yra našūs, lengvai prižiūrimi ir prieinami plačiam vartotojų ratui. Nesvarbu, ar kuriate paprastą DUK puslapį, ar sudėtingą interneto programą, išskirtinai CSS akordeonai gali padėti jums pateikti informaciją aiškiai ir patraukliai, prisidedant prie geresnės bendros vartotojo patirties pasaulinei auditorijai.

Papildomi mokymosi šaltiniai

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
• ARIA Authoring Practices Guide (APG): https://www.w3.org/WAI/ARIA/apg/
• WebAIM: https://webaim.org/